<!DOCTYPE html>
<html style="height:auto; min-height: 100%;">
<head>
    <meta charset="utf-8" />
    <title>Diboot 开发助理 专业版</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Diboot轻代码开发平台" name="keywords" />
    <meta content="高质量、高效率、智能化的软件开发平台" name="description" />
    <meta content="苏州帝博信息技术有限公司 - www.dibo.ltd" name="author" />
    <link href="https://devtools.diboot.com/cdn/v1/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/adminlte.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/toastr.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/datepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/pace.min.css" rel="stylesheet" />
    <link rel="shortcut icon" href="https://www.diboot.com/favicon.ico" />
    <style>.toast-top-center {top: 80px !important;right: 0;width: 100% } section.content{padding: 8px;} * {margin: 0;padding: 0;} body {min-width: 1080px;} li {cursor: pointer;} .sql-box {display: flex;height: 150px;width: 100%;border: solid 1px #999;box-sizing: border-box;overflow: auto;} .left-num {padding: 10px 0 15px;width: 25px;background-color: #999;color: #fff;font-size: 16px;} .num {height: 20px;text-align: center;line-height: 20px;background-color: #999;} .right-body {flex: 1;height: 100%;border: none;outline: none;resize: none;line-height: 20px;padding: 10px 15px;box-sizing: border-box;background-color: #eef1f3;color: green;font-size: 16px;} .main-nav {list-style: none;margin-bottom: 10px;position: relative;padding-left: 0;border-bottom: 1px solid #ddd;} .main-nav li {display: block;position: relative;float: left;margin-bottom: -1px;color: #747474;padding: 4px 10px;cursor: pointer;max-width: 200px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-right: 4px;} .main-nav li.active{background-color: #fff;border: 1px solid;border-color: #ddd #ddd transparent #ddd;color: #10a5f1;} section.content .btn-app.primary {background-color: #F0FFFF;} section.content .btn-app.primary:hover {color: #fff;background-color: #008d4c;} section.content .btn-reset {height: 30px;padding: 5px;font-size: 12px;} #msgWrapper{width: 400px;margin: 15px auto;} #msgWrapper a, #msgWrapper a.info{color: #fff;} #msgWrapper a.warn{color: orange;} </style>
</head>
<body class="hold-transition skin-green sidebar-collapse sidebar-mini">
<div class="wrapper">
    <header class="main-header">
        <a href="https://www.diboot.com" target="_blank" class="logo"><span class="logo-mini"><b>D</b>ibo</span><span class="logo-lg"><b>D</b>iboot 开发助理</span></a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
            <div id="msgWrapper"></div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">开发工具</li>
                <li><a href="/demo/maintain/table.html"><i class="fa fa-database"></i> <span>管理 数据库表</span></a></li>
                <li class="active"><a href="/demo/maintain/sql.html"><i class="fa fa-bolt"></i> <span>执行 SQL语句</span></a></li>
                <li><a href="/demo/generate/crud.html"><i class="fa fa-cube"></i><span>生成 CRUD功能</span></a></li>
                <li><a href="/demo/generate/import.html"><i class="fa fa-upload"></i> <span>生成 Excel导入功能</span></a></li>
                <li><a href="/demo/generate/export.html"><i class="fa fa-download"></i> <span>生成 导出到Excel功能</span></a></li>
                <li><a href="/demo/generate/report.html"><i class="fa fa-bar-chart"></i> <span>生成 统计图表功能</span></a></li>
            </ul>
        </section>
    </aside>
    <div class="content-wrapper">
        <section class="content">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class=""><a href="/demo/maintain/table.html"><i class="fa fa-database"></i> 管理数据库表 <small>(维护表和字段)</small></a></li>
                    <li class="active"><a href="/demo/maintain/sql.html"><i class="fa fa-bolt"></i> 执行SQL语句 </a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="appSQL">
                        <div class="row">
                            <div class="col-md-10">
                                <div class="form-body">
                                    <div class="form-group row">
                                        <div class="col-md-12 col-sm-12">
                                            <div class="sql-box">
                                                <div class="left-num">
                                                    <div class="num" v-for="num in numList">
                                                        {{ num }}
                                                    </div>
                                                </div>
                                                <textarea @scroll="scrollFun($event)" class="right-body" v-model="sql" name="sql" id="sql" placeholder="可选中SQL执行"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <a class="btn btn-app btn-reset" href="/demo/maintain/sql">重置</a>
                                <br />
                                <button class="btn btn-app primary" style="margin-top:30px" @click="ExecuteSQL"><i class="fa fa-bolt"></i> 执行 </button>
                            </div>
                        </div>
                        <div class="row " v-show="resultList.length&gt;0">
                            <div class="col-md-12">
                                <ul class="main-nav nav">
                                    <li class="left-li" v-for="(result, index) in resultList" :class="[result.customActive ? 'active' : '']" @click="switchLi(result.sql, index)">{{ result.sql }} </li>
                                </ul>
                                <div class="table-responsive" style="height:calc(100vh - 385px);overflow: auto;">
                                    <table class="table table-striped table-hover">
                                        <thead>
                                        <tr>
                                            <th v-for="head in headList">{{ head }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="body in bodyList">
                                            <td v-for="item in body">{{ item }}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-12" style="padding-top: 10px">
                                <div class="col-md-9 text-left">
                                    <p style="width: 100%;overflow: hidden; text-overflow:ellipsis; white-space: nowrap; color:#666; margin:10px 0 0 0">{{ showSQL }}</p>
                                </div>
                                <div class="col-md-3 text-right">
                                    <p style="color:#666;">共{{ bodyList.length }}条数据</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/jquery.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/bootstrap.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/adminlte.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/toastr.min.js"></script>
<script src="https://devtools.diboot.com/cdn/v1/vue.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/datepicker.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/pace.min.js"></script>
<script>var contextPath = "";</script>
<script type="text/javascript" src="https://devtools.diboot.com/loader/js/1.6.0?f=web/js/templates.maintain.sql.js&amp;lcs=C4LqfUblTILA6G5cbjQmbaBFRbenzFJtb3FXKP5/gQyUbQzZKRkPKOMv%2BDnRxRYlj5MDY0RddZ%2BmiTrJ5GT%2BaUl7KPk8bgdv%2BDEI5O%2BbfG3A8beHVwQAM75gqKreYmhq"></script>
</body>
</html>